<template>
  <div>
    <div class="infoDiv" style="">
      {{message}}
      <div class="img" style="overflow: hidden">
        <el-image style="width: 100%; height: 100%" :src="userInfoForm.avatar" fit="cover"></el-image>
      </div>
      <div class="scenter">
        <div class="order_center">
          <div>
            <div class="orderdetail_item orderdetail_items">
              <p>用户昵称：</p>
              <p>
                {{
                userInfoForm.nickname
                ? userInfoForm.nickname
                : "--"
              }}
              </p>
            </div>
            <div class="orderdetail_item">
              <p>用户区域：</p>
              <p>
                {{
                userInfoForm.province_name
                ? userInfoForm.province_name + userInfoForm.city_name
                : "--"
              }}
              </p>
            </div>
          </div>
          <div>
            <div class="orderdetail_item">
              <p>卡券总量：</p>
              <p>
                {{
                userInfoForm.user_behavior_count
                ? userInfoForm.user_behavior_count.coupon_count
                : "0.00"
              }}
              </p>
            </div>

          </div>
        </div>
      </div>
      <div class="right">
        <div class="order_center">
          <div class="orderdetail_item">
            <p>实名状态：</p>
            <p style="color:#567722;font-weight: 550;">
              {{
              userInfoForm.is_real_auth == 1
              ? '已实名'
              : "未实名"
            }}
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'userTopinfo',
    prpos: {
       props: ['message']
    },
    data() {
      return {
          userInfoForm:this.message
      }
    },
    mounted() {

      console.log(this.message,"888")
        console.log(this.userInfoForm,"666666")
    },
    watch: {
      message: function(e) {
        this.userInfoForm = e
        console.log(this.userInfoForm,"666666")
      }
    },
    methods: {

    }
  }
</script>
<style lang="scss">
  .infoDiv {
    width: 96%;
    margin: 10px auto;
    display: flex;
    background-color: #F5F5F5;
    border-radius: 6px;
    padding: 10px;

    .img {
      width: 65px;
      height: 65px;
      border-radius: 10%;
      background-color: #fff;
      margin-top: 5px;
    }

    .right {}

    .scenter {
      flex: 1;
      margin-left: 10px;

      h3 {
        line-height: 30px;
        font-weight: 400;
        font-size: 16px;
        padding: 0px 0;
        margin: 0;
      }
    }
  }

  .orderdetail_item {
    display: flex;
    // width: 165px;
    justify-content: start;
    margin-right: 30px;

    p:nth-child(2) {
      color: #000;
      font-weight: 550;
      margin-left: 15px;
    }
  }

  .order_center {
    display: flex;
    align-items: center;
    justify-content: start;
    flex-wrap: wrap;
    padding: 0 2px 0 0;
    font-size: 13px;
    color: #666;
  }
</style>
